<template>
    <div style="display: flex; flex-wrap: flex-start">
        <div class="demo-upload-list" v-for="(item, __index) in picture" :key="__index">
            <template>
                <!-- <Image :src="item" fit="cover" width="100%" height="100%" /> -->
                <img :src="item" />
                <div class="demo-upload-list-cover">
                    <Icon type="ios-eye-outline" @click="handleViewGoodsPicture(item)"></Icon>
                    <Icon type="ios-trash-outline" @click="handleRemoveGoodsPicture(item)"></Icon>
                </div>
            </template>
        </div>

        <Upload :show-upload-list="false" :on-success="handleSuccess" :format="['jpg', 'jpeg', 'png', 'gif']"
            :before-upload="OssPolicy" :on-format-error="handleFormatError" :on-error="uploadErr" :action="action"
            :data="this.ossBody" type="drag">
            <div style="width: 148px; height: 148px; line-height: 148px">
                <Icon type="md-add" size="20"></Icon>
            </div>
        </Upload>
        <Modal title="View Image" v-model="goodsPictureVisible">
            <img :src="previewGoodsPicture" v-if="goodsPictureVisible" style="width: 100%" />
        </Modal>
    </div>
</template>

<script>
import { v4 as uuidv4 } from 'uuid';
import * as ApiOss from '@/api/myapi/Oss.js'
import { Button } from 'view-design';
export default {
    name: "uploadPicSingle",
    props: ['pictureList'],
    data() {
        return {
            action: "https://xmut-mall.oss-cn-hangzhou.aliyuncs.com",
            ossBody: {
                policy: "",
                signature: "",
                ossaccessKeyId: "",
                key: "",
                dir: "",
                host: ""
            },
            uploadLoading: false,
            picture: [],
            //展示商品图片
            goodsPictureVisible: false,
            // 商品图片预览
            previewGoodsPicture: "",
        };
    },
    methods: {
        // 上传之前
        beforeUpload() {
            console.log("上传之前测试");
            this.uploadLoading = true;
        },
        // 上传成功回调
        handleSuccess(res, file) {
            this.$Message.success("上传成功");
            let fileName = this.ossBody.host +
                "/" +
                this.ossBody.key.replace("${filename}", file.name);
            this.uploadLoading = false;
            this.picture.push(fileName);
            this.$emit("descriptSuccess", fileName);
        },
        // 上传失败
        uploadErr() {
            console.log("上传失败");
            this.uploadLoading = false;
        },
        // 上传失败回调
        handleFormatError(file) {
            console.log("格式错误");
            this.uploadLoading = false;
            this.$Notice.warning({
                title: "The file format is incorrect",
                desc: "上传文件格式不正确"
            });
        },
        // oss签名
        OssPolicy(file) {
            this.uploadLoading = true;
            return new Promise((resolve, reject) => {
                ApiOss.policy().then(res => {
                    if (res.data.code == 0) {
                        this.ossBody.policy = res.data.data.policy;
                        this.ossBody.signature = res.data.data.signature;
                        this.ossBody.ossaccessKeyId = res.data.data.accessid;
                        this.ossBody.dir = res.data.data.dir;
                        this.ossBody.key = res.data.data.dir + uuidv4() + file.name;
                        this.ossBody.host = res.data.data.host;
                        this.uploadLoading = false;
                        resolve(true);
                    }
                    else {
                        this.$Message.error("网络拥堵");
                        this.uploadLoading = false;
                        return false;
                    }
                }).catch(err => {
                    this.uploadLoading = false;
                    console.log("出错", err);
                    reject(false);
                });
            });
        },
        handleViewGoodsPicture(url) {
            this.previewGoodsPicture = url;
            this.goodsPictureVisible = true;
        },
        handleRemoveGoodsPicture(file) {
            this.picture = this.picture.filter(item => file != item);
        },
        reviewData() {
            this.picture.push(this.pictureList)
        }
    },
    watch: {
        pictureList: {
            handler: function (v) {
                if (v) {
                    this.reviewData()
                }
            }
        }
    },
    components: { Button },
};

</script>

<style>
.demo-upload-list {
    display: inline-block;
    width: 160px;
    height: 150px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    margin-right: 4px;
}

.demo-upload-list img {
    width: 100%;
    height: 100%;
}

.demo-upload-list-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .6);
}

.demo-upload-list:hover .demo-upload-list-cover {
    display: block;
}

.demo-upload-list-cover i {
    color: #fff;
    font-size: 40px;
    cursor: pointer;
    margin: 20 20px;
}
</style>